<template>
  <div>
    <van-nav-bar
      class="link"
      title="城市列表"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content-box">
      <van-index-bar :index-list="indexList">
        <div v-for="(item, index) in indexList" :key="index">
          <!-- 当前城市 -->
          <div v-if="item === '#'">
            <van-index-anchor index="当前城市"></van-index-anchor>
            <van-cell :key="index" :title="city" />
          </div>
          <!-- 热门城市 -->
          <div v-else-if="item === '热'">
            <van-index-anchor index="热门城市"></van-index-anchor>
            <van-cell
              v-for="(items, index) in hotCityList"
              :key="index"
              @click="fn1(items)"
              :title="items.label"
            />
          </div>
          <!-- 所有城市 -->
          <div v-else>
            <van-index-anchor :index="item"></van-index-anchor>
            <van-cell
              v-for="(items, index) in citiesList[item]"
              :key="index"
              @click="fn1(items)"
              :title="items.label"
            />
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getCityList, hotCity } from '@/api/area'
export default {
  data () {
    return {
      city: localStorage.getItem('cityName'),
      indexList: [],
      hotCityList: {},
      citiesList: {}
    }
  },
  async created () {
    const { body } = await getCityList({
      level: 1
    })
    // console.log(body)
    const newObj = {}
    body.forEach((item) => {
      if (newObj[item.short[0].toUpperCase()]) {
        newObj[[item.short[0].toUpperCase()]].push(item)
      } else {
        newObj[item.short[0].toUpperCase()] = [item]
      }
    })
    newObj.B = newObj.B.filter((item) => item.label !== '北京')
    newObj.S = newObj.S.filter((item) => item.label !== '上海')
    newObj.G = newObj.G.filter((item) => item.label !== '广州')
    newObj.S = newObj.S.filter((item) => item.label !== '深圳')
    // console.log(newObj)
    // 数据首字母排序
    const newKey = Object.keys(newObj).sort()
    for (let i = 0; i < newKey.length; i++) {
      this.citiesList[newKey[i]] = newObj[newKey[i]]
    }
    console.log(this.citiesList)
    // 拿出所有键并排序 作为索引栏
    newKey.forEach((item, index) => {
      newKey[index] = item.toUpperCase()
    })

    this.indexList = newKey
    this.indexList.unshift('热')
    this.indexList.unshift('#')
    // console.log(this.indexList)

    // 热门城市
    const res = await hotCity()
    // console.log(res)
    this.hotCityList = res.body.map((item) => item)
    console.log(this.hotCityList)
  },
  methods: {
    fn1 (val) {
      console.log(val)
      localStorage.setItem('cityName', val.label)
      localStorage.setItem('cityId', val.value)
      this.city = val.label
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #21b97a;
  z-index: 2;
}
::v-deep .van-nav-bar__title,
.van-ellipsis {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
::v-deep .van-icon,
.van-icon-arrow-left,
.van-nav-bar__arrow {
  color: #fff;
}
.content-box {
  margin-top: 50px;
  ::v-deep .van-index-anchor {
    padding: 10px 15px;
    font-size: 14px;
    color: #999;
  }
  ::v-deep .van-cell {
    height: 50px;
    line-height: 30px;
    color: #333;
    .van-cell__title {
      font-size: 16px;
    }
  }
}
::v-deep .van-index-bar__index {
  padding: 2px;
  margin-top: 10px;
  border-radius: 50%;
  font-size: 14px;
  color: #333;
}
::v-deep .van-index-bar__index--active {
  color: #fff;
  background-color: #21b97a;
}
</style>
